<template>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%" border
        class="edit-table"
    >
      <el-table-column type="index" width="55" align="center">
      </el-table-column>
      <el-table-column label="子组件1" prop="receiveThisWeek"  align="center" header-align="center">
        <template slot-scope="scope">
          <el-form-item :prop="'curWeekTableOne.' + scope.$index + '.receiveThisWeek'"
                        :rules="[
                            {
                              validator:(rule, value, callback)=>validatorCom(rule, value, callback,scope.row,'receiveThisWeek','equipmentUnqualifiedThisWeek', scope.$index,'curWeekTableOne')
                            }
                        ]">
<!--            <el-input-number type="text" size="small" placeholder="请输入子组件" v-model="scope.row.receiveThisWeek"></el-input-number>-->
            <el-input type="text" class="number" size="small" placeholder="请输入子组件"
                      v-model="scope.row.receiveThisWeek"
                      oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="子组件2" prop="equipmentUnqualifiedThisWeek"  align="center" header-align="center">
        <template slot-scope="scope">
          <el-form-item :prop="'curWeekTableOne.' + scope.$index + '.equipmentUnqualifiedThisWeek'"
                        :rules="[
                            {
                              validator:(rule, value, callback)=>validatorCom(rule, value, callback,scope.row,'receiveThisWeek','equipmentUnqualifiedThisWeek', scope.$index,'curWeekTableOne')
                            }
                        ]"

          >
<!--            <el-input-number type="text" size="small" placeholder="请输入子组件" v-model="scope.row.equipmentUnqualifiedThisWeek"></el-input-number>-->
            <el-input type="text" class="number" size="small" placeholder="请输入子组件"
                      v-model="scope.row.equipmentUnqualifiedThisWeek"
                      oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>

<!--    孙子组件-->
    <grandson ref="grandson"></grandson>
  </div>
</template>
<script >
import {validatenull} from '@/utils/validate'
import grandson from './grandson'
export default {
  inject: ['thisParent'],
  props:{
    tableData:{
      type:Array,
      default:()=>[]
    }
  },
  components:{
    grandson
  },
  created(){
    //空转undefined
    //toFormat(this.tableData,['equipmentThisWeek','equipmentUnqualifiedThisWeek','materialsThisWeek','materialsUnqualifiedThisWeek'])
    this.tableData.map(item=>{
      item['receiveThisWeek'] = this.blankToUndef(item['receiveThisWeek'])
    })

    console.log('--***:',this.tableData)

  },
  data(){
    return{
      // form:{
      //   curWeekTableOne:[{receiveThisWeek:''}]
      // },
      rules: {
        receiveThisWeek: [{
            validator:(rule, value, callback)=>{
              if (validatenull(value)){
                callback('请输入')
              }else{
                callback()
              }
              console.log('--:',rule,value,callback)
            },
             required: true, message: "请输入子组件", trigger: "blur" }],
        equipmentUnqualifiedThisWeek: [{
            validator:(rule, value, callback)=>{
              if (validatenull(value)){
                callback('请输入')
              }else{
                callback()
              }
              console.log('--:',rule,value,callback)
            },
             required: true, message: "请输入子组件", trigger: "blur" }],

      },
    }
  },
  mounted() {
    this.$nextTick(function (){
       this.$on('childFunc',this.childFunc)
    })
  },
  methods:{
    blankToUndef(val) {
      if (validatenull(val)) {
        return undefined
      } else {
        return val;
      }
    },
    validatorCom(rule, value, callback,rowData,prop1,prop2,rowIndex,validateProp){
      console.log("rowData[prop1]:",rowData[prop1])
      console.log("rowData[prop2]:",rowData[prop2])
        if (Number(rowData[prop1]) < Number(rowData[prop2])){
          callback('不合格数不能大于合格数')
        }else{
          this.thisParent.$refs.formRef.clearValidate([`${validateProp}.${rowIndex}.${prop1}`,`${validateProp}.${rowIndex}.${prop2}`])
          console.log("`${validateProp}.${rowIndex}.${prop1}`:",`${validateProp}.${rowIndex}.${prop1}`)
          console.log("`${validateProp}.${rowIndex}.${prop1}`:",`${validateProp}.${rowIndex}.${prop2}`)
          // this.thisParent.$refs.formRef.clearValidate(['curWeekTableOne.0.equipmentUnqualifiedThisWeek','curWeekTableOne.0.receiveThisWeek'])
          callback()
        }
    },
    childFunc(){
      console.log("我是子组件的值")
    }
    // submit(){
    //   this.$refs.formRef.validate(valid => {
    //
    //     console.log("----valid:",valid)
    //     if (valid) {
    //
    //
    //     }
    //   })
    // }
  }
}
</script>
<style scoped>
/deep/.edit-table.el-table .el-form-item {
  margin-bottom: 0px!important;
}

::v-deep.number.el-input  .el-input__inner{
    text-align: center;
}
</style>